<template>
  <div class="article page page_padding">
    <NavigateBar :forwardTo="`/article/${id}/manage`" :showForwardButton="checkBelongTo()" />
    <transition-group name="slide-fade">
      <h1 class="tips title" v-if="article">{{ article?.atitle }}</h1>
      <span class="content" v-if="article">{{ article?.acontent }}</span>
    </transition-group>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue"
import { apis } from "../api"
import NavigateBar from "../components/NavigateBar.vue"

export default {
  components: { NavigateBar },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.id = to.params.id;
    });
  },
  setup() {
    const data = reactive({
      id: null,
      article: null
    });

    const checkBelongTo = () => {
      return apis.checkBelongTo(data.article?.uid)
    }

    const getArticleById = () => {
      setTimeout(() => {
        if (data.id != null) {
          apis.getArticleById(data.id).then(response => {
            data.article = response.data.result;
          });
        }
      });
    };
    getArticleById();
    return { ...toRefs(data), checkBelongTo };
  }
}
</script>

<style lang="less" scoped>
.article {
  padding-top: 40px;
  color: white;
}

.title {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.content {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 30px 40px;
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 2px;
}
</style>